<template>
	<view class="content">

		<view class="describe">
			常规状态正常人的心率为60-100次/分钟
		</view>

		<view class="charts-box">
			<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" :animation="false" />
		</view>


		<view class="charts-box">
			<qiun-data-charts type="line" :ontouch="true" :opts="line_opts" :chartData="line_chartData"
				:animation="false" />
		</view>


	</view>
</template>

<script>
	import sqlite from '@/common/sqlite'
	import bluetooth from "@/common/bluetooth.js"
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				refresh: true,
				chartData: {}, //上面第一个图的数据
				num: 0,
				avg_heartrate: 0,
				opts: {

					update: true,
					optsWatch: false,
					title: {
						name: "0", //显示心率数值
						fontSize: 25,
						color: "#FF0000",
					},
					subtitle: { //小标题，心率下面那行字
						name: "BPM",
						fontSize: 15,
						color: "#666666",

					},
					extra: {
						arcbar: {
							customColor: ["#820000", '#c80000'], //进度图颜色渐变
							linearType: 'custom',
						}
					}
				},
				line_chartData: {

				}, // 下面动态曲线图的数据
				line_data: [],
				line_opts: {
					update: true,
					optsWatch: false,
					color: ["#ff0000", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4"],
					enableScroll: true, // 允许滑动
					dataLabel: false, // 不显示数值
					dataPointShape: false, //不显示点
					padding: [30, 0, 0, 0], // 图表上下左右的距离
					xAxis: { //x 轴的配置
						disableGrid: true,
						itemCount: 50, // 一个视野内最多显示的数据
						disabled: true, // x 轴不显示

					},
					yAxis: { //y轴配置
						disableGrid: false,
						gridType: 'solid'
					},
					extra: { //线的样式
						line: {
							type: "curve", //将折线图弄成圆滑类型
							width: 1,
							color: "red"
						},
					},
				}
			}
		},
		onLoad() {

		},
		methods: {
			getBluData() {
				bluetooth.notify().then(function(res) {
					this.showChart(res) // 监听到数据
				}, function(err) {
					//蓝牙监听失败
					if (err == 0) {
						uni.showToast({
							title: '蓝牙未连接',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'error',
							//显示持续时间为 2秒
							duration: 2000
						})
					}
				})
			},
			showChart(res) {
				let heart = res["heart"]
				let this_ = this
				let prv = null

				if (heart) {


					if (heart != 60) { //完全等于60是一个用于初始首页图片的
						sqlite.addRowData(Math.ceil(heart))
					}
					this_.line_data.push(Math.ceil(heart))

					if (this_.line_data.length >= 20) {
						this_.line_data.shift()
					}

					let line_chartData = {
						categories: this_.line_data,
						series: [{
							name: "心率",
							data: this_.line_data,
							hoverAnimation: false,
						}, ]
					}



					if (this_.refresh) {
						//一分钟更新一次上面那个半圆的进度图，20秒更新一次
						if (prv == null) {
							let total = this_.line_data.reduce((pre, value, index, arr) => {
								return pre + value;
							});
							this_.avg_heartrate = Math.ceil(total / this_.line_data.length);
							this_.opts.title.name = this_.avg_heartrate

							let res = {
								series: [{
									name: "心率",
									color: "#FF0000",
									data: this_.avg_heartrate / 200
								}]
							};
							this_.chartData = JSON.parse(JSON.stringify(res));
							let d = new Date()
							prv = d.valueOf()
						} else {
							let now_time = new Date()
							let now = now_time.valueOf()
							if (now - prv > 10 * 1000) {
								let total = this_.line_data.reduce((pre, value, index, arr) => {
									return pre + value;
								});
								this_.avg_heartrate = Math.ceil(total / this_.line_data.length);
								this_.opts.title.name = this_.avg_heartrate
								let res = {
									series: [{
										name: "心率",
										color: "#FF0000",
										data: this_.avg_heartrate / 200
									}]
								};
								this_.chartData = JSON.parse(JSON.stringify(res));
								prv = now

							}
						}
						//跟新折线图
						this_.line_chartData = JSON.parse(JSON.stringify(line_chartData));

					}

				}
			}
		},
		onShow() {
			this.refresh = true //显示的时候刷新图表
		},
		onHide() {
			this.refresh = false //切换其他页面的时候不刷新图表
		},
		mounted() {
			this.showChart({
				"heart": 60
			})

		},
		computed: {
			...mapState(['heart'])
		},
		watch: {
			// watch 可以监听 data 数据 也可以监听 全局 vuex数据
			heart(h) {


				this.showChart({
					"heart": h
				})
			}
		},

		onReady() {}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.charts-box {
		width: 100%;
		height: 280px;
	}

	.describe {
		margin: 20px;
		color: #55aaff;
	}
</style>
